<template>
  <v-container
    fluid
  >
    <v-row justify="start">
      <v-col
        cols="12"
        md="8"
      >
        <material-card
          color="primary"
          full-header
        >
          <template #title>
            <v-alert
              :type="alertType"
              dense
              icon="mdi-timer"
            >
              {{ lanChar.sysConfig.MCOptionsConfigTitle }}
              <v-btn
                class="mx-0"
                fab
                icon
                x-small
                color="primary"
                @click="refreshData()"
              >
                <v-icon>mdi-cached</v-icon>
              </v-btn>
            </v-alert>
          </template>
          <v-container class="text-h4 text--primary font-weight-medium">
            <v-row
              class="pr-3"
              dense
            >
              <v-col
                cols="12"
                sm="2"
              >
                <div class="text-sm-right py-2">
                  {{ lanChar.sysConfig.MCOptionsConfigRcvBuffSize }}
                </div>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-text-field
                  v-model.trim="mcOptions.RcvBuffSize"
                  dense
                  readonly
                  outlined
                  hide-details
                  :suffix="lanChar.kBytes"
                />
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="2"
              >
                <div class="text-sm-right py-2">
                  {{ lanChar.sysConfig.MCOptionsConfigCacheBuffSize }}
                </div>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-text-field
                  v-model.trim="mcOptions.CacheBuffSize"
                  dense
                  readonly
                  outlined
                  hide-details
                  :suffix="lanChar.kBytes"
                />
              </v-col>
            </v-row>
            <v-row
              class="pr-3"
              dense
            >
              <v-col
                cols="12"
                sm="2"
              >
                <div class="text-sm-right py-2">
                  {{ lanChar.sysConfig.MCOptionsConfigFIFOSize }}
                </div>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-text-field
                  v-model.trim="mcOptions.FIFOSize"
                  dense
                  readonly
                  outlined
                  hide-details
                  :suffix="lanChar.kBytes"
                />
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="2"
              >
                <div class="text-sm-right py-2">
                  {{ lanChar.sysConfig.MCOptionsConfigPreallocFIFOSize }}
                </div>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-text-field
                  v-model.trim="mcOptions.PreallocFIFOSize"
                  dense
                  readonly
                  outlined
                  hide-details
                  :suffix="lanChar.kBytes"
                />
              </v-col>
            </v-row>
            <v-row
              class="pr-3"
              dense
            >
              <v-col
                cols="12"
                sm="2"
              >
                <div class="text-sm-right py-2">
                  {{ lanChar.sysConfig.MCOptionsConfigPrivateSegmentCnt }}
                </div>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-text-field
                  v-model.trim="mcOptions.PrivateSegmentCnt"
                  dense
                  readonly
                  outlined
                  hide-details
                />
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="2"
              >
                <div class="text-sm-right py-2">
                  {{ lanChar.sysConfig.MCOptionsConfigPrivateSegmentSize }}
                </div>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-text-field
                  v-model.trim="mcOptions.PrivateSegmentSize"
                  dense
                  readonly
                  outlined
                  hide-details
                  :suffix="lanChar.bytes"
                />
              </v-col>
            </v-row>
          </v-container>
        </material-card>
        <v-tooltip top>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              dark
              v-bind="attrs"
              v-on="on"
              @click="statusDialog('McOptionsModDialog', {val: mcOptions})"
            >
              <v-icon left>
                mdi-note-edit-outline
              </v-icon>
              <span>{{ lanChar.sysConfig.MCOptionsConfigModButtonDescp }}</span>
            </v-btn>
          </template>
          <span>{{ lanChar.sysConfig.MCOptionsConfigModButtonHint }}</span>
        </v-tooltip>
      </v-col>
      <v-col
        cols="12"
        md="4"
      >
        <app-card class="mt-4 text-center">
          <v-card-text class="text-center">
            <h4
              class="text-h4 mb-3 text--primary font-weight-medium"
              align="left"
            >
              {{ lanChar.sysConfig.MCOptionsConfigIntroTitle }}<br>
              <span class="text-caption">
                {{ lanChar.sysConfig.MCOptionsConfigIntroSuma }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.sysConfig.MCOptionsConfigRcvBuffSize }}:</span>
                {{ lanChar.sysConfig.MCOptionsConfigIntroRcvBuffSizeDescp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.sysConfig.MCOptionsConfigCacheBuffSize }}:</span>
                {{ lanChar.sysConfig.MCOptionsConfigIntroCacheBuffSizeDescp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.sysConfig.MCOptionsConfigFIFOSize }}:</span>
                {{ lanChar.sysConfig.MCOptionsConfigIntroFIFOSizeDescp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.sysConfig.MCOptionsConfigPreallocFIFOSize }}:</span>
                {{ lanChar.sysConfig.MCOptionsConfigIntroPreAllocFIFOSizeDescp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.sysConfig.MCOptionsConfigPrivateSegmentCnt }}:</span>
                {{ lanChar.sysConfig.MCOptionsConfigIntroPrivateSegmentCntDescp }}
                <br><span class="text-caption font-weight-medium"> - {{ lanChar.sysConfig.MCOptionsConfigPrivateSegmentSize }}:</span>
                {{ lanChar.sysConfig.MCOptionsConfigIntroPrivateSegmentSizeDescp }}
              </span>
            </h4>
            <p
              class="info--text"
              align="left"
            >
              Note:
              <br>{{ lanChar.sysConfig.MCOptionsConfigIntroNote }}
            </p>
          </v-card-text>
        </app-card>
      </v-col>
    </v-row>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
    <alert-dialog
      v-model="alert.dialog"
      :title="alert.title"
      :msg="alert.msg"
    />
    <confirm-dialog
      v-model="confirm.dialog"
      :title="confirm.content.title"
      :msg="confirm.content.msg"
      :callback="confirm.operate.callback"
      :input="confirm.operate.input"
    />
    <mc-options-mod-dialog
      v-model="status.mcOptionsModDialog"
      :input="status.operate.input"
    />
  </v-container>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'
  export default {
    name: 'McOptionsConf',
    data () {
      return {
        lanChar: lan.GetLan(),
        alertType: 'success',
        mcOptions: {
          RcvBuffSize: '0',
          CacheBuffSize: '0',
          FIFOSize: '0',
          PreallocFIFOSize: '0',
          PrivateSegmentCnt: 0,
          PrivateSegmentSize: 0,
        },
        // snackbar data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        // dialog data
        alert: {
          dialog: false,
          title: '',
          msg: '',
        },
        confirm: {
          dialog: false,
          content: {
            title: '',
            msg: '',
          },
          operate: {
            callback: null,
            input: null,
          },
        },
        status: {
          mcOptionsModDialog: false,
          operate: {
            input: null,
          },
        },
      }
    },
    computed: {
    },
    watch: {
      status: {
        handler (newValue, oldValue) {
          if (this.status.mcOptionsModDialog === false) {
            this.getMcOptions()
          }
        },
        deep: true,
      },
    },
    mounted () {
      this.getMcOptions()
    },
    created () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
      })
    },
    methods: {
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      alertInfo (title, content) {
        this.alert.dialog = true
        this.alert.title = title
        this.alert.msg = content
      },
      confirmDialog (title, msg, operate, data) {
        this.confirm.content.title = title
        this.confirm.content.msg = msg
        this.confirm.operate.callback = operate
        this.confirm.operate.input = data
        this.confirm.dialog = true
      },
      statusDialog (name, data) {
        this.status.operate.input = data
        if (name === 'McOptionsModDialog') {
          this.status.mcOptionsModDialog = true
        }
      },
      getMcOptions () {
        const data = {
          request_type: 'mc options config get',
          instance_id: 'instance_id',
          sequence_no: 1000,
        }
        mcAxios.axiosGetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.mcOptions = res.data.data
            } else {
              console.log('getMcOptions get res fail')
            }
          })
          .catch((e) => {
            console.log('getMcOptions get fail: ', e)
          })
      },
      refreshData () {
        this.getMcOptions()
      },
    },
  }

</script>
